<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" placeholder="请输入用户名" name="username" id="names"><br>
    <input type="text" placeholder="请输入年龄" name="age" id="age"><br>
    <input type="text" placeholder="请输入性别" name="gender" id="gender">
    <button type="submit" onclick="setinfo()">提交</button>
    <table>
         <tbody id="studentList">

         </tbody>
    </table>
   
    <script>
        var students = new Array()
        const itemID = 'json_person'
        const setinfo = () => {
            name = document.getElementById("names")
            age = document.getElementById("age")
            gender = document.getElementById("gender")

            person = {
                name: names.value,
                age: age.value,
                gender: gender.value
            }
            students.push(person)
            json_parse = JSON.stringify(students)
            sessionStorage.setItem(itemID, json_parse)
            getinfo()
        }
        const getinfo = () => {
            let json_person = sessionStorage.getItem(itemID)
            let list_student = JSON.parse(json_parse)

            let tobody = document.getElementById('studentList')
            tobody.innerHTML = ''

            for (let i = 0; i < list_student.length; i++) {
                let stu = list_student[i]
                let tr = document.createElement('tr')
                tr.innerHTML = '<td>' + stu.name + '</td><td>' + stu.gender + '</td><td>' + stu.age + '</td>'
                tobody.appendChild(tr)
            }
        }

    </script>
</body>

</html>